<template>
	<view class="u-skeleton" :style="$theme.pageStyle">


		<z-nav-bar ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed"
			title="律师详情">
			<view class="preview" slot="center">律师详情</view>
		</z-nav-bar>


		<view class="header-bg">
			<view class="banner img-block">
				<image src="http://tuchuangwng.oss-cn-beijing.aliyuncs.com/2022/02/10/ff0aed747f17d.jpg" mode="">
				</image>
			</view>
			<view class="lawyer-card u-skeleton-fillet">

				<view class="img-block radius-m">
					<image :src="lawyerData.avatar" mode=""></image>
				</view>
				<view class="pad u-skeleton-fillet">
					<view class="tit">
						<view class="name">
							{{lawyerData.real_name}}{{$t('change.律师')}}
						</view>
					</view>
					<view class="data-num">
						<span>{{lawyerData.lawoffice}}</span>

					</view>
				</view>
				<view class="help-show">
					<li class="help-show-li">
						<p class="help-show-p">
							<span class="din-b">
								{{lawyerData.fuwu}}
							</span>
						</p>
						{{$t('change.服务评分')}}
					</li>
					<li class="help-show-li">
						<p class="help-show-p">
							<span class="din-b">
								{{lawyerData.fuwu}}
							</span>
						</p>
						{{$t('change.服务人数')}}
					</li>
					<li class="help-show-li">
						<p class="help-show-p">
							<span class="din-b">
								1{{$t('change.分钟')}}
							</span>
						</p>
						{{$t('change.响应时间')}}
					</li>
				</view>
				<view class="tag-show" style="margin-top: 20px;">
					<span class="title">
						{{$t('change.擅长')}} ：
					</span>
					<view class="info-intro-text-js u-line-1">
						{{lawyerData.like}}
					</view>
				</view>
				<view class="info-intro" style="margin-top: 10px;" @click="IsShowApp()">
					<view class="info-intro-text">
						<span class="info-intro-text-js">{{$t('change.介绍')}} ：</span>
						{{lawyerData.intro}}
					</view>
					<image src="../../static/youkh.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="aui-palace u-skeleton-fillet">
			<view class="bar-title">
				<view class="tit">
					{{$t('change.即时服务')}}
				</view>
			</view>

			<view class="clinic-content u-skeleton-fillet">
				<view class="cl-flex">
					<view class="cl-flex title">
						<image src="../../static/gou.png" mode=""></image>
						<span class="c-color-gray">{{$t('change.认证律师')}} </span>
					</view>
					<view class="cl-flex title">
						<image src="../../static/gou.png" mode=""></image>
						<span class="c-color-gray">{{$t('change.隐私保障')}} </span>
					</view>
					<view class="cl-flex title">
						<image src="../../static/gou.png" mode=""></image>
						<span class="c-color-gray">{{$t('change.未服务可退')}} </span>
					</view>
				</view>
			</view>

			<view class="tab-bar serve-tab mt12 u-skeleton-fillet">

				<view class="tab-nav">

					<li :class="tabIndex==1? 'nav-item is-this':'nav-item'" @click="tabClick(1)"
						v-if="lawyerData.tuwenstatus == 1">
						<view class="box">
							<view class="u-badge badge-warn-gradient">
								{{$t('change.有券')}}
							</view>
							<view class="" style="display: flex;">
								<image src="http://tuchuangwng.oss-cn-beijing.aliyuncs.com/2021/11/03/45c5e84dd40ae.png"
									mode="" class="icon"></image>
								<view class="tit">
									{{$t('change.图文咨询')}}
								</view>
							</view>
							<view class="other">
								<span class="u-price s-warn">
									￥
									<em class="din-b f-num">
										{{ Number(lawyerData.tuwenprice) }}/{{ lawyerData.tuwentime}}
										{{$t('change.分钟')}}
									</em>
								</span>
							</view>
						</view>
					</li>


					<li :class="tabIndex==2?'nav-item is-this':'nav-item'" @click="tabClick(2)"
						v-if="lawyerData.audiostatus == 1">

						<view class="box">
							<view class="u-badge badge-warn-gradient">
								{{$t('change.有券')}}
							</view>
							<view class="" style="display: flex;">
								<image src="http://tuchuangwng.oss-cn-beijing.aliyuncs.com/2021/11/03/e2e244adbffb8.png"
									mode="" class="icon"></image>
								<view class="tit">
									{{$t('change.电话咨询')}}
								</view>
							</view>

							<view class="other">
								<span class="u-price s-warn">
									￥
									<em class="din-b f-num">
										{{ Number(lawyerData.audioprice) }}/{{ lawyerData.audiotime}}
										{{$t('change.分钟')}}
									</em>
								</span>
							</view>
						</view>
					</li>

					<li class="nav-item" @click="privateConsultant()" v-if="lawyerData.privatestatus == 1">

						<view class="box">

							<view class="" style="display: flex;">
								<image src="http://imgs.soft.jx.cn/2022/06/21/6a87430266319.png" mode="" class="icon">
								</image>
								<view class="tit">
									{{$t('change.私人法律顾问')}}
								</view>
							</view>

							<view class="other">

							</view>

						</view>
					</li>
				</view>
			</view>
		</view>

		<view class="aui-palace" v-if="lawyerData.offlinestatus != 0">
			<view class="bar-title u-skeleton-fillet" style="display: flex;justify-content: space-between;">
				<view class="tit">
					{{$t('change.线下预约')}}
				</view>
				<view class="" style="color: #666;font-size: 12px;">
					{{$t('change.查看全部时间')}}
				</view>
			</view>

			<view class="other-info-item other-info-item-article">
				<its-calendar v-if="isDataLoaded" :day_date="lawyerData.offline_days" :sta_num="9" :end_num="18"
					:int_num="lawyerData.offline_gap" @getTime="TimeData"></its-calendar>
			</view>
		</view>

		<!-- <view class="aui-palace" v-if="lawcase.length != 0">
			<view class="bar-title u-skeleton-fillet" style="display: flex;justify-content: space-between;">
				<view class="tit">
					律师案例
				</view>
				<view class="" style="color: #666;" @click="allcase()">
					查看全部
				</view>
			</view>

			<block v-for="(item, index) in lawcase" :key="index">
				<view class="other-info-item other-info-item-article"
					@click="toarticle('/pages/case/detail?id=' + item.id)">
					<view class="">
						<view class="other-info-item-title">
							<span class="title">{{item.title}}</span>
						</view>
						<view class="other-info-item-origin">
							<span style='margin: -1px 5px 0px 0px;'>{{item.nickname}}</span>
							<span class='lawyer-profile-info-icon'>{{item.name}}</span>
							<span style='margin: -1px 8px 0px 0px;'>{{item.read}}人查看</span>
						</view>
					</view>
				</view>
			</block>
		</view> -->

		<!-- <view class="aui-palace " v-if="lawarticle.length != 0">
			<view class="bar-title u-skeleton-fillet" style="display: flex;justify-content: space-between;">
				<view class="tit">
					律师文章
				</view>
				<view class="" style="color: #666;" @click="alllawyerarticle()">
					查看全部
				</view>
			</view>
			<block v-for="(item, index) in lawarticle" :key="index">
				<view class="other-info-item other-info-item-article"
					@click="toarticle('/pages/article/detail?id=' + item.id)">
					<view class="">
						<view class="other-info-item-title">
							<span class="title">{{item.title}}</span>
						</view>
						<view class="other-info-item-origin">
							<span style='margin: -1px 5px 0px 0px;'>{{item.nickname}}</span>
							<span style='margin: -1px 8px 0px 0px;'>执业{{item.year}}年</span>
							<span style='margin: -1px 8px 0px 0px;'>{{item.read}}人阅读</span>
							<span class='lawyer-profile-info-icon'>官方认证</span>
						</view>
					</view>
				</view>
			</block>
		</view> -->

		<view class="aui-palace" v-if="courseData.length != 0">
			<view class="bar-title u-skeleton-fillet" style="display: flex;justify-content: space-between;">
				<view class="tit">
					{{$t('change.律师课程')}}
				</view>
			</view>

			<view class="course-box">

				<block v-for="(item, index) in courseData" :key="index">
					<view class="course_item" @click="Tourl('/course/detail/index?id=' + item.id)">
						<image :src="item.cover" mode="" class="img"></image>
						<view class="probox">
							<view class="title_item">
								<text>{{item.name}}</text>
								<view class="title_price">
									<text class="title_price_rmb">¥</text>
									<text class="title_price_price">{{item.sell_price}}</text>
								</view>
							</view>
							<view class="title_desc">{{item.cate_name}} ·
								<span v-if="item.type === 1">{{$t('change.图文')}}</span>
								<span v-else-if="item.type === 2">{{$t('change.音频')}}</span>
								<span v-else-if="item.type === 3">{{$t('change.视频')}}</span>
							</view>

							<!-- <view class="free_tag">
								<view>
									免费
								</view>
							</view> -->
						</view>
					</view>
				</block>

				<!-- <view class="course-list" @click="tocourse(item)">
					<view class="course-list-box">
						<view class="course-list-top">
							<image :src="item.cover"></image>
						</view>
						<view class="course-list-btm">
							<view class="course-list-btm-text">
								{{item.name}}
							</view>
							<view class="course-list-btm-view">
								<view class="course-price">
									<span style="color: #ee3912;font-size: 12px;">¥</span> {{item.sell_price}}
								</view>
							</view>
						</view>
					</view>
				</view> -->

			</view>

		</view>

		<view class="aui-palace " v-if="evaluateData.length != 0">
			<view class="bar-title u-skeleton-fillet">
				<view class="tit">
					{{$t('change.律师评价')}}
				</view>
			</view>
			<comment :list="evaluateData" :show="true"> </comment>
		</view>

		<view class="zhanwei">

		</view>





		<view class="bottom-bar u-skeleton-fillet">
			<view class="bottom-tab-ask">
				<li class="bottom-tab-ask-li">
					<button type="default" class="u-btn btn-primary btn-n btn-block" @click="topay()"
						v-if="BtnType == 'service'">{{$t('change.立即咨询')}}
						<span class="f13">
							（￥{{ price }}）
						</span>
					</button>
					<button type="default" class="u-btn btn-primary btn-n btn-block" @click="topay()" v-else>
						{{$t('change.立即预约')}}
						<span class="f13">
						</span>
					</button>
				</li>
			</view>
		</view>


		<u-popup mode="bottom" :show="showApp" @close="closeshowApp" @open="openshowApp" :round="15" :closeable="true">
			<view style="padding-bottom: 30rpx;" class="showbottom">
				<view class="tag-show">
					<view class="tit" style="font-weight: bold;font-size: 25px;">
						{{$t('change.律师简介')}}
					</view>
					<view style="height: 25px;"></view>
					<view class="info-intro-text-js u-line-1">
						{{lawyerData.like}}
					</view>
					<!-- <p class="tag-group tag-info">
						<span class="u-tag" v-for="( tag ,index) in lawyerData.like" :key="index">
							{{ tag }}
						</span>
					</p> -->
				</view>
				<view style="height: 25px;"></view>
				<view class="layer2000">
					{{lawyerData.intro}}
				</view>
				<view style="height: 25px;"></view>
			</view>
		</u-popup>

		<u-popup :show="showprivate" mode="bottom" :round="15" @close="closeshowprivate" @open="openshowprivate">
			<view class="u-p-30">
				<view class="u-flex">
					<view class="u-flex-3">
						<u-image :src="lawyerData.avatar" width="90" height="90" radius="15"></u-image>
					</view>
					<view class="u-flex-7">
						<view class="u-line-1 goods-name">{{lawyerData.real_name}}{{$t('change.律师私人法律顾问')}} </view>
						<view class="u-line-1">
							<view class="goods-price-selling">
								<text> <span style="font-size: 14px;">￥</span> {{privateData.content}}</text>
							</view>
						</view>
						<view class="u-line-1">
							<text class="goods-spec" style="color: red;">{{$t('change.有效期')}} {{privateData.time}}
								{{$t('change.天')}} </text>
						</view>
					</view>
				</view>
				<view class="u-m-t-30">
					<view class="u-p-t-20">
						<view class="u-content-color u-line-1">{{$t('change.选择时长')}} </view>
						<view class="u-m-t-10 u-m-r-10 u-m-b-10 m-inline-block"
							v-for="(subitem, idx) in lawyerData.private" :key="subitem.time">
							<u-tag :text="subitem.type" plain :type="idx === activeIndex ? 'error' : 'info'"
								@click="setSpecItem(idx, subitem)" mode="light"></u-tag>
						</view>
					</view>
				</view>
			</view>
			<view class="btn " @click="Buycard()">
				{{$t('change.立即购买')}}
			</view>
		</u-popup>

		<u-popup :show="paypop" mode="bottom" :round="15" @close="closespaypop" @open="openpaypop">
			<view style="padding-bottom: 30rpx;height: 350px;" class="showbottom">

				<view class="pay-type-list">
					<view class="pay-title">{{$t('change.请选择支付方式')}} ：</view>
					<radio-group class="uni-flex" style="width: 100%;" name="gender">
						<block v-for="(item, index) in payList" :key="index">
							<view class="type-item" :class="{ 'act': index === selectedIndex }"
								@click="selectNav(item,index)">
								<image :src="item.icon" mode="" class="a-img"></image>
								<view class="con">
									<text class="tit">{{item.pay_way_name}}</text>
								</view>
							</view>
						</block>
					</radio-group>
				</view>
				<view class="botton" @click="confirm_pay">
					<text class="text110">{{$t('change.确认支付')}}</text>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	import Comment from '@/components/comment.vue';
	import itsCalendar from '@/components/its-calendar/its-calendar.vue';

	import {
		storeToRefs
	} from 'pinia';
	import {
		useMsgStore
	} from '@/store/message';
	import {
		useloginStore
	} from '@/store/login';
	import pinia from '@/store/index'
	const msgStore = useMsgStore(pinia)
	const loginStore = useloginStore(pinia)
	const {
		unread,
		sysUnread
	} = storeToRefs(msgStore);

	export default {
		components: {
			itsCalendar,
			Comment
		},

		data() {
			return {
				isDataLoaded: false, // 标志：数据是否已加载
				id: '',
				scrollTop: 0,
				tabIndex: 1,
				lawyerData: {},
				law: [],
				text: '',
				lawcomment: [],
				lawarticle: [],
				courseData: [],
				evaluateData: [],
				lawcase: [],
				lawshanchang: '',
				showApp: false,
				showlogin: false,
				showinfo: false,
				loading: true,
				nickname: '',
				username: '',
				price: 0,
				hascoupon: 0,
				tuwentime: 0,
				coupontype: 0,
				reduce_amount: 0,
				islogin: 0,
				jd_status: 1,
				annuity: 0,
				free: 0,
				title: '',
				showprivate: false,
				activeIndex: 0,
				privateData: '',
				BtnType: 'service',
				isLogin: '',
				paypop: false,
				payList: uni.getStorageSync('pay'),
				Payinfo: {},
				pay_way: '',
				pay_config_id: 1,
				selectedIndex: 10,
			}
		},
		watch: {
			'lawyerData.private': {
				handler(newVal) {
					if (newVal && newVal.length > 0) {
						this.privateData = newVal[0];
						this.activeIndex = 0;
					}
				},
				immediate: true
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(option) {
			this.id = option.id;
			// uni.showLoading({
			// 	title: '加载中....'
			// })
			// setTimeout(() => {
			// 	this.loading = false;
			// 	uni.hideLoading();
			// }, 1000)
		},
		onShow() {
			this.getlawinfo();
			if (uni.getStorageSync('token') == '') {
				this.islogin = 0
			} else {
				this.islogin = 1
				// this.loginload();
			}
		},
		mounted() {
			// 检查本地联系人,如果没有才去请求接口
			let contacts = uni.getStorageSync('allContacts');
			if (!contacts.length) {
				this.initContacts();
			}
			// 监听ws状态,如果重新连接了,要更新联系人
			uni.$on('socketStatus', (e) => {
				if (e) {
					this.initContacts();
				}
			})
		},
		//导航栏

		methods: {
			initContacts() {
				console.log('initContacts -- ')
				this.modelName = '';
				this.$api.msgApi.initContacts().then(res => {
					if (res.code == 0) {
						// 设置消息未读数和系统消息未读数
						msgStore.sysUnread = res.count;
						msgStore.initContacts(res.data);
					}
				})
			},
			IsShowApp() {
				this.showApp = true
			},
			closeshowApp() {
				this.showApp = false
			},
			openshowApp() {},
			TimeData(e) {
				this.BtnType = e.type
				uni.setStorageSync('book', e)
				// console.log(e)
			},
			//选择私人法律顾问规格
			setSpecItem(idx, subitem) {
				this.activeIndex = idx;
				this.privateData = subitem
			},
			// 选择支付方式
			changePayType(item) {
				console.log(item)
				this.pay_way = item.pay_config_id
			},
			selectNav(item, index) {
				this.selectedIndex = index;
				this.pay_way = item.pay_config_id
				// this.getnavgoods()
			},
			//获取律师信息
			async getlawinfo() {
				try {
					const res = await $H.post('lawyer/lawinfo', {
						id: this.id
					}, {
						token: true
					});
					this.courseData = res.data.course
					this.lawyerData = res.data.lawyer
					this.evaluateData = res.data.evaluate
					this.price = this.lawyerData.tuwenprice
					this.isDataLoaded = true;
				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
			},
			tabClick(index) {

				this.tabIndex = index;

				if (this.tabIndex == 1) {
					this.price = this.lawyerData.tuwenprice
				} else if (this.tabIndex == 2) {
					this.price = this.lawyerData.audioprice
				} else if (this.tabIndex == 3) {
					this.price = this.lawyerData.videoprice
				} else {

				}
				this.BtnType = 'service'
			},

			Buycard() {
				uni.setStorageSync('privateData', this.privateData)
				return uni.navigateTo({
					url: '/pages/lawyer/private_detail?id=' + this.id
				})
			},
			Tourl(url) {
				uni.navigateTo({
					url: url
				})
			},
			topay() {
				
				var that = this
			
				if (that.islogin == 0) {
					return that.ToLogin();
				}
				
				uni.requestSubscribeMessage({
					//此处填写刚才申请模板的模板ID
					tmplIds: [
						'jP5E4ztXMQ7MKlf0SuuI2XX3M-m606D5tZ5j2027i30',
						'lrPWSP7OY962nGv1PACuKtNqEshxNOo9HC6k2FAFBb0',
						'krq49dJX8c1r4GUMhBUyFWDzdZKML-9giMTJxAdrmDA',
					],
					success(res) {
						console.log(res)
						console.log('触发了订阅');
					},
					fail(errMessage) {
						uni.showModal({
							title: '您未开启消息订阅',
							content: '为了给您提供更好的服务，请您授权消息订阅',
							success: res2 => {
								if (res2.confirm) {
									uni.openSetting({
										success(res) {
											console.log('打开设置页', res.authSetting);
										}
									})
								} else {
									console.log('决绝')
								}
							}
						})
					},
					complete() {
						if (that.BtnType == 'service') {
							if (that.tabIndex == 1) {
								return that.paypop = true
							} else if (that.tabIndex == 2) {
								uni.navigateTo({
									url: '/pages/lawyer/mobile?id=' + that.id
								})
							} else if (that.tabIndex == 3) {

							} else {

							}
						} else {
							uni.navigateTo({
								url: '/pages/lawyer/book?id=' + that.id
							})
						}
					}
				})
				
				
			},

			ToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},

			agree() {
				uni.navigateTo({
					url: '/pages/login/serviceAgreement'
				})
			},
			yisi() {
				uni.navigateTo({
					url: '/pages/login/privacyAgreement'
				})
			},
			toarticle(url) {
				uni.navigateTo({
					url: url
				})
			},
			alllawyerarticle() {
				uni.navigateTo({
					url: '/pages/article/lawyerallarticle?mid=' + this.mid
				})
			},
			allcase() {
				uni.navigateTo({
					url: '/pages/case/allcase?mid=' + this.mid
				})
			},

			confirm_pay() {

				if (this.selectedIndex === 10) {
					return uni.showToast({
						icon: "none",
						title: this.$t('change.请选择支付方式')
					})
				}

				$H.post('order/CreateConsultOrder', {
					pay_way: this.pay_way,
					id: this.id,
					type: this.tabIndex
				}, {
					token: true
				}).then(res => {
					console.log(res)
					this.paypop = false

					if (res.code == 1) {
						if (res.data.code == 1) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});

							if (res.data.type == 1) {
								return setTimeout(() => {
									uni.navigateTo({
										url: `/im/message/chat?id=${res.data.lawyer_id}` +
											'&order_id=' + res.data.order_no,
									});
								}, 400)
							}

							if (res.data.type == 2) {
								return setTimeout(() => {
									uni.navigateTo({
										url: '/order/consult/detail?id=' + res
											.data.order_no
									})
								}, 400)
							}

						} else if (res.data.code == 2) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
							// this.paypop = false
						} else {
							uni.requestPayment({
								provider: 'wxpay',
								appId: res.data.config.appId,
								timeStamp: res.data.config.timeStamp,
								nonceStr: res.data.config.nonceStr,
								package: res.data.config.package,
								signType: res.data.config.signType,
								paySign: res.data.config.paySign,
								success: function(res) {
									//跳转到会话页面
									if (res.data.type == 1) {
										return setTimeout(() => {
											uni.navigateTo({
												url: `/im/message/chat?id=${res.data.lawyer_id}` +
													'&order_id=' + res.data.order_no,
											});
										}, 400)
									}

									if (res.data.type == 2) {
										return setTimeout(() => {
											uni.navigateTo({
												url: '/order/consult/detail?id=' + res
													.data.order_no
											})
										}, 400)
									}

								},
								fail: function(err) {
									uni.showToast({
										title: '支付失败',
										duration: 2000
									});
								}
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}

				})
			},
			privateConsultant() {
				this.showprivate = true
			},
			closeshowprivate() {
				this.showprivate = false
			},
			openshowprivate() {},
			paypops() {
				this.paypop = true
			},
			closespaypop() {
				this.paypop = false
			},
			openpaypop() {

			}



		}

	}
</script>

<style lang="scss" scoped>
	/* 头部卡片 */
	.act {
		background: rgba(0, 122, 255, 0.1);
		border-radius: 15px;
	}

	.banner {
		height: 200px;
	}

	.img-block {
		position: relative;
		display: block;
	}

	.img-block image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.commont-box {
		display: flex;
		margin: 10px 20px 10px 30px;
		padding: 5px;
		border-radius: 5px;
		background-color: #f2f2f2;
	}

	.lawyer-card {
		position: relative;
		margin: -80px 15px 0;
		padding-bottom: 0.6rem;
		background: #fff url(https://css.66law.cn/ui_v1/m/pic/lawyer_home/bg/lawyer_card.png) no-repeat center top;
		background-size: 100% auto;
		border-radius: 14px;
	}

	.lawyer-card .img-block {
		position: absolute;
		left: 0.8rem;
		top: -1.35rem;
		width: 4.5rem;
		height: 4.5rem;
		// box-shadow: 0px 2px 2px rgb(0 0 0 / 10%);
		border-radius: 0.4rem;
	}

	.img-block image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.radius-m image {
		border-radius: 8px !important;
	}

	.lawyer-card .pad {
		padding: 0.8rem 0.6rem 0.9rem 5.9rem;
	}

	.lawyer-card .pad .tit {
		line-height: 1.4rem;
		overflow: hidden;
	}

	.lawyer-card .pad .tit .name {
		float: left;
		font-size: 1.2rem;
		max-width: 9rem;
		font-weight: 800;
	}

	.lawyer-card .pad .data-num {
		font-size: .8rem;
		color: #999;
		line-height: .8rem;
		height: 0.8rem;
		margin-top: 0.2rem;
	}

	.lawyer-card .pad .data-num span {
		float: left;
		margin-right: 0.3rem;
	}

	.lawyer-card .help-show {
		display: flex;
	}

	.lawyer-card .help-show .help-show-li {
		position: relative;
		flex: 1;
		text-align: center;
		font-size: .8rem;
		color: var(--color-primary-light-3);
		line-height: .8rem;
	}

	.lawyer-card .help-show .help-show-p {
		height: 1rem;
		line-height: 1rem;
		text-align: center;
		font-size: .8rem;
		color: var(--color-primary);
		margin-bottom: 0.5rem;
	}

	.lawyer-card .help-show li:after {
		position: absolute;
		top: 0.3rem;
		right: 0;
		content: '';
		width: 1px;
		height: 1.2rem;
		background-color: #e5e1d9;
	}

	.din-b {
		font-size: 22px;
		font-family: "SemiBold";
	}

	.lawyer-card .help-show li .din-b {
		margin: -0.25rem 1px 0;
		font-size: 22px;
		font-family: "SemiBold";
	}

	.ico-gift,
	.lawyer-card .help-show li .din-b {
		display: inline-block;
		vertical-align: middle;
	}

	.lawyer-card .tag-show {
		margin: 0.4rem 0.8rem 0;
	}

	.lawyer-card .tag-show .title {
		float: left;
		font-size: 14px;
		color: #999;
	}

	.tag-group {
		overflow: hidden;
	}

	.is-disabled {
		color: #bbb !important;
	}

	.tag-group .u-tag {
		float: left;
		height: 1.1rem;
		line-height: 1.1rem;
		border-radius: 0.55rem;
		font-size: .55rem;
		margin: 0 0.2rem 0.2rem 0;
	}

	.tag-info .u-tag {
		background: #fff;
		border-color: #d9d9d9;
		color: #666;
	}

	.u-tag {
		padding: 0 5px;
		color: #666;
		margin: 4px;
		background-color: #f5f5f5;
		border: 1px solid transparent;
		border-radius: 4px;
		transition: background .2s linear, border-color .2s linear, color .2s linear;
	}

	.info-intro {
		height: 20px;
		font-size: 15px;
		color: #1f1f1f;
		line-height: 18px;
		padding: 0.4rem 0.8rem 0;
		display: flex;
		align-items: center;
	}

	.info-intro-text-js {
		font-size: 14px;
		color: #999;
	}

	.info-intro image {
		height: 15px;
		width: 15px;
	}

	.info-intro .info-intro-text {
		height: 20px;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		font-size: 14px;
		color: #999;
		line-height: 18px;
	}

	/* 在线服务卡片 */
	.aui-palace {
		position: relative;
		overflow: hidden;
		margin: 15px;
		background-color: #fff;
		border-radius: 14px;
		box-shadow: 0 .2rem 1rem rgba(0, 0, 0, .05);
		transition: .3s all cubic-bezier(0, 1, 0.95, 1.05);
	}

	.bar-title {
		padding: 0.9rem 0.8rem 0.3rem;
		overflow: hidden;
	}

	.bar-title .tit {
		font-size: 1rem;
		line-height: 1.1rem;
		font-weight: 700;
	}

	.mt12 {
		margin-top: 0.6rem;
		margin-bottom: 0.6rem;
	}

	.serve-tab .tab-nav {
		padding: 0 0.6rem;
	}

	.serve-tab .tab-nav .nav-item {
		text-align: center;
		padding: 0.2rem 0.2rem;
	}

	.tab-nav .nav-item {
		padding: 0 0.4rem;
		text-align: center;
		font-size: .8rem;
		color: #666;
	}

	.serve-tab .tab-nav .nav-item .box {
		position: relative;
		display: flex;
		// height: 2.6rem;
		padding: 0.6rem 0;
		background-color: #fff;
		border-radius: 0.4rem;
		z-index: 10;
		border: 1px solid #f5f5f5;
		justify-content: space-between;
	}

	.serve-tab .tab-nav .nav-item .box .u-badge {
		position: absolute;
		right: -5px;
		top: -0.55rem;
		z-index: 10;
		padding: 0 0.2rem;
		border-radius: 0.2rem 0.2rem 0.2rem 0;
	}

	.u-badge {
		padding: 0 0.5rem;
		white-space: nowrap;
		border: 1px solid #999;
		background-color: #fff;
		color: #666;
		font-size: .5rem;
		line-height: .9rem;
		border-radius: 1rem;
		position: relative;
	}

	.u-badge.badge-warn-gradient {
		border-color: #ff7879;
		background: linear-gradient(77deg, #e72d2e 0%, #fe5f5f 100%);
		color: #fff;
	}

	.u-badge.badge-warn-gradient:before,
	.u-badge.badge-warn-gradient.icon-menu:after {
		border-top-color: transparent;
	}

	.u-badge:before,
	.u-badge.icon-menu:after {
		position: absolute;
		top: 100%;
		left: 50%;
		content: '';
		z-index: 10;
		margin-left: -0.2rem;
		border: 0.2rem solid transparent;
		border-top-color: #fff;
	}

	.serve-tab .tab-nav .nav-item .box .u-badge:after {
		border-top-color: #e72d2e;
		left: -0.05rem;
		top: 0.5rem;
		transform: rotate(135deg);
	}

	.u-badge.badge-warn-gradient:after {
		border-top-color: #f24546;
	}


	.serve-tab .tab-nav .nav-item.is-this .box:before {
		position: absolute;
		left: 0;
		top: 0;
		content: '';
		z-index: -10;
		width: 100%;
		height: 100%;
		border-radius: 0.4rem;
		box-sizing: border-box;
		border: 0.1rem solid var(--color-primary);
		background: var(--color-primary-light-7);
		opacity: 0.3;
	}

	.serve-tab .tab-nav .nav-item .icon {
		display: block;
		margin: 0px 10px 0px 10px;
		width: 1.6rem;
		height: 1.6rem;
	}

	.serve-tab .tab-nav .nav-item .tit {
		font-size: 16px;
		line-height: 25px;
		font-weight: 700;
	}

	.serve-tab .tab-nav .nav-item .other {
		font-size: .55rem;
		color: #bbb;
		line-height: 1.2rem;
		height: 1.2rem;
		margin-top: 0.25rem;
		margin-right: 15px;
	}

	.serve-tab .tab-nav .nav-item .other .u-price {
		display: inline-block;
		vertical-align: middle;
		margin: -2px 4px 0 0;
	}

	.u-price {
		height: 1.2rem;
		font-size: .55rem;
	}

	.s-warn {
		color: #ec3b3b !important;
	}

	.u-price .f-num {
		display: inline-block;
		vertical-align: middle;
		font-size: 1rem;
		margin-top: -6px;
		font-family: "SemiBold";
	}

	em,
	i {
		font-style: normal;
	}

	ol,
	ul,
	li {
		list-style: none;
	}

	.clinic-content {
		background: #f5f5f5;
		margin: 15px;
		border-radius: 9px;
		padding: 7px 10px 8px;
		font-size: 14px;
		color: #858585;
	}

	.cl-flex {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.title image {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.c-color {
		color: #525252;
	}

	.clinic-content-intro {
		margin-top: 10px;
	}

	.clinic-content-intro-list-item {
		position: relative;
		padding-left: 16px;
	}

	.clinic-content-intro-list-item::after {
		content: "";
		position: absolute;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: #525252;
		left: 0;
		top: 50%;
		-webkit-transform: translate(4px);
		transform: translate(4px);
	}

	/* 评价 */









	/* 底部按钮 */
	.zhanwei {
		height: 80px;
	}

	.bottom-bar {
		position: fixed;
		z-index: 100;
		bottom: 0;
		width: 100%;
		z-index: 100;
	}

	.bottom-tab-ask {
		background-color: #fff;
	}

	.bottom-tab-ask-li {
		padding: 15px 20px;
	}

	.u-btn.btn-block {
		display: block;
		width: -webkit-fill-available;
	}

	.u-btn.btn-n {
		padding: 0 1rem;
		height: 50px;
		line-height: 50px;
		border-radius: 35px;
	}

	.u-btn.btn-primary {
		border-color: var(--color-primary);
		background-color: var(--color-primary);
		color: #fff;
	}

	.u-btn.btn-primary1 {
		border-color: #666;
		background-color: #666;
		color: #fff;
	}


	.f13 {
		font-size: .65rem !important;
	}

	.showbottom {
		padding: 20px;
	}



	.group20001 {
		padding: 20px;
		background-color: rgba(255, 255, 255, 1);
	}

	.section90001 {
		width: 30px;
		height: 30px;
	}

	.label40001 {
		width: 30px;
		height: 30px;
	}

	.section100001 {
		height: 64px;
	}

	.word800001 {
		height: 64rpx;
		display: block;
		overflow-wrap: break-word;
		color: rgba(78, 78, 79, 1);
		font-size: 24rpx;
		font-family: PingFangSC-Regular;
		text-align: center;
		margin-top: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.section110001 {
		height: 70px;
		padding-top: 20px;
	}

	.outer10001 {
		height: 50px;
		border-radius: 35px;
		background-color: #2670ff;
		justify-content: center;
		align-items: center;
	}

	.outer10002 {
		height: 50px;
		border-radius: 35px;
		background-color: #75A5FB;
		justify-content: center;
		align-items: center;
	}

	.word90001 {
		display: block;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 22px;
		white-space: nowrap;
		line-height: 50px;
		text-align: center;
	}

	.section120001 {
		height: 48px;
	}

	.txt40001 {
		height: 48px;
		display: block;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 18px;
		font-family: PingFangSC-Semibold;
		white-space: nowrap;
		line-height: 48px;
		text-align: center;
	}

	.section130001 {
		width: 70px;
		margin: 0 auto;
	}

	.img60001 {
		width: 71px;
		height: 100px;
	}

	.agreement {
		margin: 10px 0;
		color: #999;
		font-size: 14px;
		text-align: center;
	}

	//律师文章
	.other-info-item-article {
		margin-top: 8px;
		overflow: hidden;
		margin: 10px;
	}

	.other-info-item {
		height: fit-content;
	}

	.other-info-item .other-info-item-title {
		font-size: 18px;
		color: #000;
		line-height: 18px;
		margin-top: 15px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.other-info-item .other-info-item-origin {
		height: 16px;
		font-size: 14px;
		color: #999;
		margin-top: 15px;
		display: flex;
		align-items: center;
	}

	.other-info-item-origin .lawyer-profile-info-icon {
		margin-left: 0;
	}

	.lawyer-profile-info-icon {
		margin-right: 5px;
		padding: 2px 5px;
		background: rgba(0, 0, 0, .03);
		line-height: 11px;
		border-radius: 8px;
		border: 0.67px solid rgba(0, 0, 0, .15);
		margin-left: 5px;
		margin-top: -1px;
		font-size: 10px;
		color: #858585;
	}

	//律师文章结束

	//律师课程开始
	.course-box {
		.course_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: row;
			height: 90px;
			border-radius: 12px;
			padding: 10px;

			.img {
				width: 85px;
				height: 65px;
				border-radius: 5px;
			}

			.probox {
				width: 70%;
				height: 65px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title_item {
					display: flex;
					justify-content: space-between;
					align-items: baseline;
					color: #333333;
					font-weight: bold;

					.title_price {
						width: 62px;
						color: #e54d42;
						text-align: right;
						font-size: 12px;
					}

					.title_price_price {
						font-weight: bold;
						font-size: 16px;
						color: #e54d42;
						text-align: right;
					}
				}

				.title_desc {
					color: #aaaaaa;
					font-size: 12px;
				}

				.free_tag {
					align-items: center;
					flex-wrap: wrap;
					display: flex;

					view {
						text-align: right;
						flex-basis: 40%;
					}
				}

			}

		}

	}



	//律师课程end

	.sd_free {
		margin: 0.5rem 0.6rem;
		height: 30px;
		background-color: #f93e3e;
		line-height: 30px;
		text-align: center;
		border-radius: 0.4rem;
		color: #ffffff;
		font-weight: 400;
		font-size: 14px;
	}




	.u-p-30 {
		padding: 16px !important;
	}

	.u-flex {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.u-flex-3 {
		flex: 3;
	}

	.u-image {
		position: relative;
		transition: opacity 0.5s ease-in-out;
	}

	.u-flex-7 {
		flex: 7;
	}

	.u-line-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.u-line-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.u-m-t-10 {
		margin-top: 5px !important;
	}

	.goods-name {
		font-size: 18px;
		font-weight: bold;
	}

	.goods-price-selling {
		font-size: 26px;
		font-weight: bold;
		color: red;
	}

	.goods-price-market {
		text-decoration: line-through;
		color: #666;
		font-size: 14px;
	}

	.goods-spec {
		font-size: 14px;
	}

	.u-m-t-30 {
		margin-top: 16px !important;
	}

	.u-content-color {
		color: #606266;
	}

	.u-number-box {
		margin-top: 15px;
		display: inline-flex;
		align-items: center;
	}

	.u-light-color {
		color: #c0c4cc;
	}

	.u-font-sm {
		font-size: 14px;
	}

	.m-inline-block {
		display: inline-block;
	}

	.u-p-t-20 {
		padding-top: 11px !important;
	}

	.u-m-b-10 {
		margin-bottom: 5px !important;
	}

	.u-m-r-10 {
		margin-right: 5px !important;
	}

	.u-m-t-10 {
		margin-top: 5px !important;
	}


	.btn {
		margin: 15px;
		border-radius: 25px;
		height: 45px;
		font-size: 16px;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--color-primary);
	}


	button {
		border: 0;
		background-color: transparent;
		outline: none;
		position: inherit;
		line-height: normal;
	}

	button::after {
		border: none;
		width: 0;
		height: 0;
	}

	.pay-type-list {
		// margin: 15px;
		margin-bottom: 10px;

		.pay-title {
			height: 70upx;
			font-size: 14px;
			line-height: 70upx;
			font-weight: bold;
			// border-bottom: 2upx solid #DDDAD4;
		}

		.type-item {
			height: 110upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30upx;
			position: relative;
			padding: 10px;
			margin-bottom: 15px;

			// border-bottom: 2upx solid #DDDAD4;
			.a-img {
				width: 70upx;
				height: 70upx;
				margin-right: 20upx;
			}
		}

		.b-b {
			border-bottom: 2upx solid #DDDAD4;
		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}

		.icon-weixinzhifu {
			color: #36cb59;
		}

		.icon-alipay {
			color: #01aaef;
		}

		.tit {
			font-size: 28upx;
			color: #f97020;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 28upx;
			color: #f97020;
		}
	}

	.text110 {
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
	}


	.botton {
		bottom: 20px;
		position: fixed;
		width: 90%;
		border-radius: 44rpx;
		background-color: var(--color-primary);
		// margin: 10px;
		// margin-top: 80rpx;
		height: 50px;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}
</style>